/**
 * 泛娱区块链 - Mine
 * @zaric
 * 资讯列表
 */

'use strict';

import React, {Component} from 'react'
import {StyleSheet, Text, View, Image, TouchableOpacity, LayoutAnimation} from 'react-native'
import Images from '../../asset';
import {diffTime} from '../../util/Tool'
import LayoutAnimationManager from '../../config/manager/LayoutAnimationManager'
import ToastManager from '../../config/manager/ToastManager'
import ServicesApi from '../../config/ServicesApi';
import ImageView from '../../component/common/ImageView';
import {inject, observer} from "mobx-react";
@inject('taskStore')
@observer
class FlashItem extends Component {

    constructor(props) {
        super(props);
        const {item} = props;
        this.state = {expanable: true, bullPlus: 0, bearPlus: 0,bullCounts:item.up_counts,bearCounts:item.down_counts};
    }

    componentDidMount() {

    }

    _onPressExpanable = () => {
        const {expanable} = this.state;
        // LayoutAnimationManager.updateWithScaleXY();
        LayoutAnimation.easeInEaseOut();
        this.setState({expanable: !expanable})
    };

    _onPressBull = () => {
        const {bearPlus, bullPlus} = this.state;
        if (bearPlus > 0) {
            ToastManager.show('已经踩过了哦~');
            return
        }
        if (bullPlus > 0) {
            ToastManager.show('已经赞过了哦~');
            return
        }
        this._requestBull()
    };

    _onPressBear = () => {
        const {bearPlus, bullPlus} = this.state;
        if (bearPlus > 0) {
            ToastManager.show('已经踩过了哦~');
            return
        }
        if (bullPlus > 0) {
            ToastManager.show('已经赞过了哦~');
            return
        }

        this._requestBear()
    };

    _onPressShare = async () => {
        const {item,taskStore} = this.props;
        ActionsManager.showShareModule({
            type: 'link',
            title: '北链泛娱',
            text: item.flash_title,
            url: ServicesApi.DOWNLOAD_HOST,
            imageUrl: ServicesApi.ICON_APP,
        });
        await taskStore.saveTask('flash_share')
    };

    _onPressComment(item) {
        RouterHelper.navigate('评论','CommentList',{topic_id:item.flash_id,reply_module:'flash'});
    }

    _requestBull = async () => {
        const {item} = this.props
        let url = ServicesApi.FLASH_BULL
        let data = {flash_id: item.flash_id}
        const result = await Services.post(url, data)
        if (result.code === StatusCode.SUCCESS_CODE) {
            let temp = parseFloat(this.state.bullCounts);
            temp ++;
            this.setState({bullPlus: 1,bullCounts:temp})
        }
    };
    _requestBear = async () => {
        const {item} = this.props;
        let url = ServicesApi.FLASH_BEAR;
        let data = {flash_id: item.flash_id};
        const result = await Services.post(url, data);
        if (result.code === StatusCode.SUCCESS_CODE) {
            let temp = parseFloat(this.state.bearCounts);
            temp ++;
            this.setState({bearPlus: 1,bearCounts:temp})
        }
    };

    render() {
        let {item} = this.props;
        let {expanable, bullPlus, bearPlus,bullCounts,bearCounts} = this.state;

        return (
            <View style={styles.itemView}>
                <View style={styles.frontView}>
                    <ImageView style={styles.dot} source={Images.icon_dot}/>
                    <View style={styles.frontLine}/>
                </View>
                <View style={styles.contentView}>
                    <Text style={styles.time}>{Moment(item.create_time).format('MM-DD HH:mm')}</Text>
                    <Text style={styles.title}>{item.flash_title}</Text>
                    <Text
                        style={styles.content}>{expanable ? (item.flash_content.length > 50 ? item.flash_content.substr(0, 50) + "..." : item.flash_content) : item.flash_content}</Text>
                    <TouchableOpacity style={styles.action} onPress={this._onPressExpanable}>
                        <ImageView style={styles.arrow}
                                   source={expanable ? Images.icon_down_arrow : Images.icon_top_arrow}/>
                        <Text style={styles.openText}>{expanable ? '展开' : '收缩'}</Text>
                    </TouchableOpacity>
                    <View style={styles.bottom}>
                        <View style={styles.row}>
                            <TouchableOpacity style={[styles.bottomTouch, {borderColor: "#53a2ff"}]}
                                              onPress={this._onPressBull}>
                                <View style={[styles.rowView, {
                                    paddingHorizontal: 5,
                                    paddingVertical: 3,
                                    borderColor: "#53a2ff"
                                }]}>
                                    <ImageView style={styles.bullIcon} source={Images.icon_bull}/>
                                    <Text style={[styles.bullText, {paddingHorizontal: 3}]}>利好</Text>
                                    <Text style={styles.bullText}>{bullCounts}</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity style={[styles.bottomTouch, {marginLeft: 10, borderColor: "#ffaa1f"}]}
                                              onPress={this._onPressBear}>
                                <View style={[styles.rowView, {
                                    paddingHorizontal: 5,
                                    paddingVertical: 3,
                                    borderColor: "#ffaa1f"
                                }]}>
                                    <ImageView style={styles.bullIcon} source={Images.icon_bear}/>
                                    <Text style={[styles.bearText, {paddingHorizontal: 3}]}>利空</Text>
                                    <Text style={styles.bearText}>{bearCounts}</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.row}>
                            <TouchableOpacity
                                style={Theme.RCS}
                                onPress={() =>this._onPressComment(item)}
                            >
                                {item.comments_count && <Text style={styles.commentCount}>{item.comments_count}</Text>}
                                <ImageView style={styles.share} source={Images.icon_comment_msg}/>
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={styles.customMargin}
                                onPress={this._onPressShare}
                            >
                                <ImageView style={styles.share} source={Images.icon_video_share}/>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    itemView: {
        flex: 1,
        flexDirection: 'row',
        paddingTop: 5,
    },
    frontView: {
        alignItems: 'center',
        marginLeft: 16,
    },
    dot: {
        width: 14,
        height: 14,
        marginBottom: 6,
    },
    frontLine: {
        flex: 1,
        width: 1,
        backgroundColor: '#979797',
    },
    contentView: {
        flex: 1,
        marginLeft: 20,
        marginRight: 26,
        marginBottom: 15
    },
    time: {
        fontFamily: "PingFangSC-Regular",
        fontSize: FontSize(10),
        color: "#9e9c99"
    },
    title: {
        fontFamily: "PingFangSC-Medium",
        fontSize: FontSize(15),
        lineHeight: 23,
        color: "#333",
        marginRight: 26,
    },
    content: {
        fontFamily: "PingFangSC-Regular",
        fontSize: FontSize(12),
        color: "#b8b8b8",
        marginRight: 5,
        lineHeight: 20,
    },
    openText: {
        fontSize: FontSize(12),
        color: '#333'
    },
    arrow: {
        width: 12,
        height: 7,
        marginRight: 3
    },
    action: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    bottom: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginTop: 12,
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        // backgroundColor: 'red',
    },
    rowView: {
        flexDirection: 'row',
        alignItems: 'center',
        borderWidth: Theme.minPixel,
    },
    bottomTouch: {},
    bullIcon: {
        width: 12,
        height: 12,
    },
    bullText: {
        fontSize: FontSize(8),
        color: "#53a2ff"
    },
    bearText: {
        fontSize: FontSize(8),
        color: "#ffaa1f"
    },
    commentCount: {
        fontSize: 14,
        color: '#999',
        marginRight: 5,
    },
    comment: {
        width: 18,
        height: 18,
    },
    share: {
        width: 18,
        height: 18,
    },
    customMargin: {
        marginLeft: 10
    }
});

export default FlashItem